CSS in JS調査

歴史

CSS設計、BEM

CSS in JS

utility first

tailwind系

現状のメジャーライブラリ

vercel製

styled-componentsの方がシェアある気がするが、Next.js使ってるとデフォルトでこっちがついてきたりする

styled-components

@emotion/css

フレームワークに依存しない。classNameを返すから

styleタグを追加しつつ、対応するuniqueなclassNameを返す

@emotion/react

css prop使える

逆に言うと、jsxをいじることになるので、jsx pragmaかbabelをかませる

いや、でもどうなんだろ、classnames的な役割も担えるなら一理あるが

@emoton/styled

styled-componentsの書き方

utility first

react,vueのコンポーネントも使うことを推奨してる

便利class name集とも言えるが、使ってるclass名だけ生成するとかそういうこともやってる

共通のテーマ、サイズ、メディアクエリのbreakpointなど、設定でいじったり

使用してるものだけ生成

htmlやjs, vueファイルを探索して、使っているクラスのみを出力する

これは、他のCSS in JS系とは微妙に相性が悪い

共存はできるが、tailwindで使っている色をJS側で使うのがむずい

このように、良い点が複数の観点であり、議論がしっちゃかめっちゃかになりがちなので、こういう把握が大事

批判

以下のような前提なら主張も理解できる

htmlを与えられて、cssを書く

メンテナンスをしない

書いて終わり

他人が間違ったCSSを書く心配がない（少人数で、全体のコードを全員が脳内によく記憶している）

割れ窓の心配がない

でも現代はコンポーネント単位で作るのが主

jsでコンポーネントをまとめて、動的に出し分ける

tailwindcssなapiをもったreact component

内部的にはemotion使ってるし、install時に自分で一緒に入れる必要がある

twind

軽量tailwindって感じ

The smallest, fastest, most feature complete Tailwind-in-JS solution in existence

tailwind-in-JS

tailwindのいいところをcss-in-jssにねじ込むやつ

twin.macro

twin.macroって、Tailwind CSSの利点のうち「Cascadeしない」と「Tailwind特有のクラス名が使える」以外消し飛んでいる気がするんだけどいいのかな（？）

twin.macro も型安全の先行例として挙げてもいいのかもしれませんが、流石に設計がやんちゃすぎてスルーしました。なので twin.macro については詳しくありません。

macroでむりやりねじ込む感じなのだとしたら、

tailwindが用意してる他のエコシステムが効かなくなる、それはそうよな

xwind

tailwind

長いものにまかれたい

小さく収めたい(とにかくclass書くだけ)

CSS in JSをしっかりやりたいなら、emotion

しっかりって何？

既存のプロジェクトでなんかどれか使ってるなら、

必要なら置き換える

必要ないならそのまま使ってるやつ使う

タイミングだけを意識しておく

どこで置き換える必要が出てくるか

置き換え先の選定

と思ってたけど、twindが良い気がしてきた

でもキモいところもあるな…

TS書いてて、便利コンポーネントもさくさく使いたいならChakra UI

ただし、将来的に剥がしにくくなりそうな気もする

補助

classnames, clsx

公式でも、classNameを文字列として動的に操作したりするなら、こういうライブラリ使うと良いよと言っている

観点

型補完、リンター

使えるプロパティ

パフォーマンス

事前ビルド or ランタイムの動作

スタイルと機能を持ったコンポーネントの区別

好み

便利コンポーネント

その密結合かモジュラーか

密でいいからバシバシ使いたいならChakra UI

ちゃんと分けたいならHeadless UIとか

CSS in JSの記法

Object style

string style

(s)cssと同じなので、こっちになれてる人はこっちが楽

既存のCSSから置き換えるようなケースでも、こっちが楽だろう

型の恩恵は？

tailwindcss-classnames

2 点目は静的解析がしやすいという点です。CSS Modules や styled-jsx では、通常の CSS と同様にセレクタを記述して className にクラス名を書いていくことになります。これらの手法の問題点は、クラス名を間違っていたとしても実行するまで気づくことができないこと、未使用のスタイルを静的解析により検出することができないことです

これってstyled-jsx/cssで大丈夫じゃね？